import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface PolarBarProps {
    chartId?: string;
    width?: string;
    height?: string;
    title?: any;
    polar?: object;
    radiusAxis?: object;
    angleAxis?: object;
    tooltip?: object;
    animation?: boolean;
    seriesData?: number[];
}

@customElement('lit-polar-bar')
export class LitPolarBar extends LitElement {
    @property({type: String}) chartId: string = 'lit-polar-bar-chart';
    @property({type: String}) width: string = '600px';
    @property({type: String}) height: string = '400px';
    @property({type: Object}) title: any = [{text: 'Radial Polar Bar Label Position (middle)'}];
    @property({type: Object}) polar: any = {radius: [30, '80%']};
    @property({type: Object}) radiusAxis: any = {};
    @property({type: Object}) angleAxis: any = {};
    @property({type: Object}) tooltip: any = {};
    @property({type: Boolean}) animation: boolean = false;
    @property({type: Array}) seriesData: number[] = [2, 1.2, 2.4, 3.6];

    option: echarts.EChartsOption = {
        title: this.title,
        polar: this.polar,
        radiusAxis: this.radiusAxis,
        angleAxis: this.angleAxis,
        tooltip: this.tooltip,
        series: {
            type: 'bar',
            data: this.seriesData,
            coordinateSystem: 'polar',
            label: {
                show: true,
                position: 'middle',
                formatter: '{b}: {c}'
            }
        },
        animation: this.animation,
    };

    static styles = style;

    updated() {
        this.option.title = this.title;
        this.option.polar = this.polar;
        this.option.radiusAxis = this.radiusAxis;
        this.option.angleAxis = this.angleAxis;
        this.option.tooltip = this.tooltip;
        (this.option.series as any).data = this.seriesData;
        this.option.animation = this.animation;
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width: ${this.width}; height: ${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-polar-bar': LitPolarBar;
    }
}